<template>
    <j-modal title="标签管理"
             width="800px"
             :visible.sync="visible">
        <a-form-model layout="inline" ref="form" :model="form" :rules="rules">
            <a-form-model-item label="文件分类" prop="parentId">
                <a-tree-select style="min-width:200px;"
                               allow-clear
                               v-model="form.parentId"
                               placeholder="请选择文件分类"
                               :replaceFields="{children:'crdFileBliList',key:'id',title:'fileName',value:'id'}"
                               :treeData="treeData"></a-tree-select>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="loadTagList">查询</a-button>
                <a-button type="primary" icon="plus" style="margin-left: 8px;"
                          @click="addNewTag">新增
                </a-button>
            </a-form-model-item>
        </a-form-model>
        <a-spin :spinning="loading" style="padding: 20px 0;">
            <a-empty v-if="data.length === 0"></a-empty>
            <a-row v-else type="flex">
                <a-col v-for="tag in data" :key="tag.id">
                    <span class="tag">
                        <span>{{tag.tagName}}</span>
                        <span @click="editTag(tag)" style="padding: 0 3px 0 6px;cursor: pointer">
                            <a-icon type="edit"/>
                        </span>
                        <span @click="handleDelete(tag)" style="padding: 0 3px;cursor:pointer;">
                             <a-icon type="delete"/>
                        </span>
                    </span>
                </a-col>
            </a-row>
            <a-row v-if="addNew">
                <a-col :span="12">
                    <a-input v-model="newTag" placeholder="请输入标签名称"></a-input>
                </a-col>
                <a-col :span="12">
                    <a-button :loading="saveLoading" type="primary" style="margin-left: 8px;" @click="handleAddOrEdit">保存</a-button>
                    <a-button style="margin-left: 8px;" @click="handleCancel">取消</a-button>
                </a-col>
            </a-row>
        </a-spin>
    </j-modal>
</template>

<script>
    import {getAction, postAction} from "../../../api/manage";

    export default {
        name: "TagModal",
        data() {
            this.rules = {
                parentId: [{required: true, message: '请选择文件类型', trigger: 'change'}],
            };
            return {
                visible: false,
                loading: false,
                treeData: [],
                data: [],
                form: {
                    parentId: ''
                },
                addNew: false,
                newTag: '',
                saveLoading:false,
            }
        },
        methods: {
            show() {
                this.visible = true;
                this.queryFileClassify();
            },
            //查询文件分类
            async queryFileClassify() {
                const params = {fileGroupType: 0};
                const res = await getAction('filebank/api/queryFileGroupAndFolder', params);
                if (res && res.success) {
                    this.treeData = res.result;
                }
            },
            loadTagList() {
                this.$refs.form.validate(async validate => {
                    if (validate) {
                        this.loading = true;
                        const res = await getAction('filebank/api/queryAllTag', this.form);
                        if (res.success) {
                            this.data = res.result;
                        }
                        this.loading = false;
                    } else {
                        return false;
                    }
                });
            },
            addNewTag() {
                if (!this.form.parentId) {
                    this.$warning({content: '请先选择分类哦'});
                    return;
                }
                this.addNew = true;
                this.newTag = '';
            },
            handleCancel() {
                this.addNew = false;
                this.newTag = '';
                this.editId = null;
            },
            editTag(record) {
                this.addNew = true;
                this.newTag = record.tagName;
                this.editId = record.id;
            },
            handleAddOrEdit(){
                if(this.editId){
                    this.handleEdit();
                }else{
                    this.handleAdd();
                }
            },
            async handleAdd() {
                if (!this.newTag) {
                    this.$warning({content: '标签名不能为空哦'});
                    return;
                }
                this.saveLoading = true;
                const res = await postAction('filebank/api/addTag',
                    {parentId: this.form.parentId, tagName: this.newTag});
                this.saveLoading = false;
                this.handleCancel();
                if (res && res.success) {
                    this.loadTagList();
                }else{
                    this.$message.error(res.message||'请求错误');
                }
            },
            async handleEdit() {
                this.saveLoading = true;
                const res = await postAction('filebank/api/editTag',
                    {id: this.editId, tagName: this.newTag});
                this.saveLoading = false;
                this.handleCancel();
                if (res && res.success) {
                    this.loadTagList();
                }
            },
            async handleDelete(record) {
                this.loading = true;
                const res = await postAction('filebank/api/deleteTag',
                    {id: record.id});
                this.loading = false;
                if (res && res.success) {
                    this.loadTagList();
                }
            }
        }
    }
</script>

<style scoped>
    .tag {
        display: inline-block;
        height: auto;
        margin: 0 8px 8px 0;
        padding: 0 7px;
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap;
        border-radius: 4px;
        cursor: default;
        opacity: 1;
        color: #eb2f96;
        background: #fff0f6;
        border: 1px solid #ffadd2;
    }
</style>
